<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title></title>
	<link rel="stylesheet" href="css/reset.css" />
	<link rel="stylesheet" href="css/login.css" />
    <script type="text/javascript" src="js/jquery.min.js"></script>
   
</head>
<body>

<div class="page">
	<div class="loginwarrp">
		<div class="logo">名片二维码</div>
        <div class="login_form">
			<form id="message">
				<li class="login-item">
					<span>姓 名：</span>
					<input type="text" id="name" name="name" class="login_input" value="">
                                        <span id="count-msg" class="error"></span>
				</li>
				<li class="login-item">
					<span>地 址：</span>
					<input type="text" id="add" name="add" class="login_input"value="" >
                                        <span id="password-msg" class="error"></span>
				</li>
				<li class="login-item">
					<span>单 位：</span>
					<input type="text" id="work" name="work" class="login_input"value="" >
                                        <span id="password-msg" class="error"></span>
				</li>
				<li class="login-item">
					<span>部 门：</span>
					<input type="text" id="bumen" name="bumen" class="login_input"value="" >
                                        <span id="password-msg" class="error"></span>
				</li>
				
				<li class="login-item">
					<span>手 机：</span>
					<input type="text" id="tel" name="tel" class="login_input"value="" >
                                        <span id="password-msg" class="error"></span>
				</li>
				<li class="login-item">
					<span>固 话：</span>
					<input type="text" id="num" name="num" class="login_input"value="" >
                                        <span id="password-msg" class="error"></span>
				</li>
				<li class="login-item">
					<span>邮 箱：</span>
					<input type="text" id="mail" name="mail" class="login_input"value="" >
                                        <span id="password-msg" class="error"></span>
				</li>
				<li class="login-sub">
					<input type="button" name="Submit" value="生成" onclick="login()"/>
				</li>  
				<li class="login-item">
					<span>状 态：</span>
					<input color="" type="text" id="state" name="state" class="login_input" value="准备生成二维码">
                                        <span id="count-msg" class="error"></span>
				</li>     
				<li class="login-sub">
					<img id="code" src="/imgsurl/timg1.jpg" alt="code" height="150" width="150">
				</li>                  
           </form>
         
		</div>
	</div>
</div>
<script type="text/javascript">
function login() {
    $.ajax({
    //几个参数需要注意一下
        type: "POST",//方法类型
        cache: false,
        dataType: "text",//预期服务器返回的数据类型
        url: "${pageContext.request.contextPath}/QrCodeServlet" ,//url
        data: $('#message').serialize(),
        success: function (result) {
            //console.log(result);//打印服务端返回的数据(调试用)  
        	document.getElementById("state").value="二维码生成成功！";
        	document.getElementById("code").src="/imgsurl/"+result;
        },
        error : function() {
        	document.getElementById("state").src="二维码生成异常！";
        }
    });
}
</script>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("state").innerHTML="二维码生成成功！";
    //document.getElementById("code").src=xmlhttp.responseText;
    }
  }
xmlhttp.open("post","/Code/QrCodeServlet",true);
xmlhttp.send();
}
</script>
<script type="text/javascript">
		window.onload = function() {
			var config = {
				vx : 4,
				vy : 4,
				height : 2,
				width : 2,
				count : 100,
				color : "121, 162, 185",
				stroke : "100, 200, 180",
				dist : 6000,
				e_dist : 20000,
				max_conn : 10
			}
			CanvasParticle(config);
		}
	</script>
	<script type="text/javascript" src="js/canvas-particle.js"></script>
</body>
</html>